<template>
	<!-- #ifdef APP-PLUS || H5 -->
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="false">
			<block slot="content">院校分布图</block>
		</cu-custom>
		<add-tip :tip="tip" :duration="duration" />
		<div class="top_title">
			<p class="title_1">全国985、211、双一流分布图</p>
			<p class="title_2">一研为定！</p>
			<!--这里可以加一个：点击五次可弹出锦鲤图 hiahiahia-->
		</div>
		<view class="">
			<view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
		</view>
		<div style="text-align: center;">
			<p> 暂不支持H5端和app端,请前往微信小程序查看详情</p>
			<!-- <image src="../../static/fkbg.jpg"></image> -->
		</div>
		<div class="goods-list-box">
			<!-- <view class="goods-list-item" v-for="(item,university) in university_all[nowprovince]">
				<span class="university">{{university}}</span>
				<text class="occupy">_</text>
				<span v-if="item[0]==1" class="u985">985<text class="occupy">_</text></span>
				<span v-if="item[1]==1" class="u211">211<text class="occupy">_</text></span>
				<span v-if="item[2]==1" class="u1">双一流</span>
			</view> -->
		</div>
	</view>
	<!-- #endif -->

	<!--#ifdef MP-WEIXIN -->
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="false" style="margin-top: 0px;">
			<block slot="content">院校分布图</block>
		</cu-custom>
		<add-tip :tip="tip" :duration="duration" />
		<div class="top_title">
			<br/>
			<p class="title_1">全国985、211、双一流分布图</p>
			<p class="title_2">一研为定！</p>
			<!--这里可以加一个：点击五次可弹出锦鲤图 hiahiahia-->
		</div>
		<view class="wrap">
			<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
		</view>
		<!-- {{university_all[nowprovince]["北京交通大学"]}} -->
		<!--测试用代码-->
		<!-- <button v-on:click="chartClick">{{nowprovince}}</button> -->
		<div class="goods-list-box">
			<view class="goods-list-item" v-for="(item,university) in university_all[nowprovince]">
				<span class="university">{{university}}</span>
				<text class="occupy">_</text>
				<span v-if="item[0]==1" class="u985">985<text class="occupy">_</text></span>
				<span v-if="item[1]==1" class="u211">211<text class="occupy">_</text></span>
				<span v-if="item[2]==1" class="u1">双</span>
			</view>
		</div>
	</view>
	<!--#endif -->

</template>


<script>
	// #ifdef APP || H5
	import university from '../../static/university.js'
	// console.log(university.data);
	const university_all = university.data;
	// var nowprovince = "111";
	export default {
		data() {
			return {
				// nowprovince,
				data: [{
						name: "南海诸岛",
						value: "0"
					},
					{
						name: '北京',
						value: "33"
					},
					{
						name: '天津',
						value: "6"
					},
					{
						name: '上海',
						value: "14"
					},
					{
						name: '重庆',
						value: "2"
					},
					{
						name: '河北',
						value: "1"
					},
					{
						name: '河南',
						value: "2"
					},
					{
						name: '云南',
						value: "1"
					},
					{
						name: '辽宁',
						value: "4"
					},
					{
						name: '黑龙江',
						value: "4"
					},
					{
						name: '湖南',
						value: "4"
					},
					{
						name: '安徽',
						value: "3"
					},
					{
						name: '山东',
						value: "3"
					},
					{
						name: '新疆',
						value: "2"
					},
					{
						name: '江苏',
						value: "15"
					},
					{
						name: '浙江',
						value: "3"
					},
					{
						name: '江西',
						value: "1"
					},
					{
						name: '湖北',
						value: "7"
					},
					{
						name: '广西',
						value: "1"
					},
					{
						name: '甘肃',
						value: "1"
					},
					{
						name: '山西',
						value: "1"
					},
					{
						name: '内蒙古',
						value: "1"
					},
					{
						name: '陕西',
						value: "8"
					},
					{
						name: '吉林',
						value: "3"
					},
					{
						name: '福建',
						value: "2"
					},
					{
						name: '贵州',
						value: "1"
					},
					{
						name: '广东',
						value: "5"
					},
					{
						name: '青海',
						value: "1"
					},
					{
						name: '西藏',
						value: "1"
					},
					{
						name: '四川',
						value: "8"
					},
					{
						name: '宁夏',
						value: "1"
					},
					{
						name: '海南',
						value: "1"
					},
					{
						name: '台湾',
						value: "0"
					},
					{
						name: '香港',
						value: "0"
					},
					{
						name: '澳门',
						value: "0"
					}
				],
				option: {
					backgroundColor: '#fff',
					title: {
						subtext: '    一战成硕!',
						x: 'left',
						textStyle: {
							color: 'black'
						}
					},
					tooltip: {
						trigger: 'item',
						enterable: true,
						formatter: '{b}',
						// formatter: '{b}:{c}所高校',
						// formatter: function(params) {
						// 	console.log(params.data.name + "111")
						// 	that2.nowprovince = params.data.name; //省份名称（在地图里的）
						// 	console.log(nowprovince)
						// 	let view_provience = nowprovince
						// 	// html = `<p>${nowprovince}</p>`
						// 	// console.log(university.data[nowprovince])  在json文件里的省份名
						// 	var showtooltip = "";
						// 	if (params.data.value == 0)
						// 		showtooltip = that2.nowprovince + ':不统计该地区'
						// 	else
						// 		showtooltip = that2.nowprovince + ':' + params.data.value + '所高校'
						// 	return showtooltip
						// }
					}, //左侧小导航图标
					visualMap: {
						min: 0,
						max: 50,
						left: 'left',
						top: 'bottom',
						// orient:'horizontal',
						// text: ['高', '低'], //取值范围的文字
						inRange: {
							color: ['#fffae8', '#f29c3a'] //取值范围的颜色
						},
						show: true, //图注
						pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
							{
								min: 0,
								max: 1,
								label: '0~1所'
							},
							{
								min: 2,
								max: 4,
								label: '2~4所'
							},
							{
								min: 5,
								max: 15,
								label: '5~15所'
							},
							{
								min: 16,
								label: '15+所'
							},
						],
						hoverLink: true,
						textStyle: {
							fontSize: 8
						},
					},
					geo: {
						map: 'china',
						roam: false, //不开启缩放和平移
						zoom: 1.2, //视角缩放比例
						label: {
							normal: {
								// show: true,
								fontSize: 8,
								color: 'rgba(0, 0, 0, 0.5)' //文字颜色
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(0, 0, 0, 0.2)' //省份边框颜色
							},
							emphasis: {
								areaColor: '#F3B329', //鼠标选择区域颜色
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
								borderWidth: 0,
								shadowColor: 'rgba(0, 0, 0, 0.2)' //选择后的边框阴影颜色
							}
						}
					},
					//配置属性
					series: [{
						type: 'map',
						geoIndex: 0,
						animation: false,
					}]
				}
			}
		},
		onLoad() {

		},
	}

	// #endif

	// #ifdef MP-WEIXIN
	import * as echarts from 'echarts/echarts.min.js'; /*echarts.min.js为在线定制*/
	import * as chinaJson from '../../static/china_wx.json'; /*echart.min.js为在线定制*/
	import mpvueEcharts from 'mpvue-echarts';


	import university from '../../static/university.js'
	// console.log(university.data); 
	const university_all = university.data;
	var nowprovince = "111";

	export default {
		data() {
			return {
				university_all,
				nowprovince,
				echarts,
				data: [{
						name: "南海诸岛",
						value: "0"
					},
					{
						name: '北京',
						value: "33"
					},
					{
						name: '天津',
						value: "6"
					},
					{
						name: '上海',
						value: "14"
					},
					{
						name: '重庆',
						value: "2"
					},
					{
						name: '河北',
						value: "1"
					},
					{
						name: '河南',
						value: "2"
					},
					{
						name: '云南',
						value: "1"
					},
					{
						name: '辽宁',
						value: "4"
					},
					{
						name: '黑龙江',
						value: "4"
					},
					{
						name: '湖南',
						value: "4"
					},
					{
						name: '安徽',
						value: "3"
					},
					{
						name: '山东',
						value: "3"
					},
					{
						name: '新疆',
						value: "2"
					},
					{
						name: '江苏',
						value: "15"
					},
					{
						name: '浙江',
						value: "3"
					},
					{
						name: '江西',
						value: "1"
					},
					{
						name: '湖北',
						value: "7"
					},
					{
						name: '广西',
						value: "1"
					},
					{
						name: '甘肃',
						value: "1"
					},
					{
						name: '山西',
						value: "1"
					},
					{
						name: '内蒙古',
						value: "1"
					},
					{
						name: '陕西',
						value: "8"
					},
					{
						name: '吉林',
						value: "3"
					},
					{
						name: '福建',
						value: "2"
					},
					{
						name: '贵州',
						value: "1"
					},
					{
						name: '广东',
						value: "5"
					},
					{
						name: '青海',
						value: "1"
					},
					{
						name: '西藏',
						value: "1"
					},
					{
						name: '四川',
						value: "8"
					},
					{
						name: '宁夏',
						value: "1"
					},
					{
						name: '海南',
						value: "1"
					},
					{
						name: '台湾',
						value: "0"
					},
					{
						name: '香港',
						value: "0"
					},
					{
						name: '澳门',
						value: "0"
					}
				]
			};
		},
		components: {
			mpvueEcharts
		},
		onLoad() {

		},
		methods: {
			// chartClick() {
			// 	console.log(this.nowprovince)
			// 	// callback(nowprovince)
			// 	return nowprovince
			// },
			renderMap(e) {
				const that = this;
				var mydata = that.data;
				let {
					canvas,
					width,
					height
				} = e;
				width = width - 20;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				echarts.registerMap('china', chinaJson);
				canvas.setChart(chart) 
				var that2 = this; //要命,卡在这一句一个多小时
				var optionMap = {
					title: {
						subtext: '    一战成硕!',
						x: 'left',
						textStyle: {
							color: 'black'
						}
					},
					tooltip: {
						trigger: 'item',
						enterable: true,
						// formatter: '{b}:{c}所高校',
						formatter: function(params) {
							// console.log(params.data.name + "111")
							that2.nowprovince = params.data.name; //省份名称（在地图里的）
							let view_provience = nowprovince
							// html = `<p>${nowprovince}</p>`
							// console.log(university.data[nowprovince])  在json文件里的省份名
							var showtooltip = "";
							if (params.data.value == 0)
								showtooltip = that2.nowprovince + ':不统计该地区'
							else
								showtooltip = that2.nowprovince + ':' + params.data.value + '所高校'
							return showtooltip
						}
					},
					//左侧小导航图标
					visualMap: {
						min: 0,
						max: 50,
						left: 'left',
						top: 'bottom', 
						// orient:'horizontal',
						// text: ['高', '低'], //取值范围的文字
						inRange: {
							color: ['#fffae8', '#f29c3a'] //取值范围的颜色
						},
						show: true, //图注
						pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
							{
								min: 0,
								max: 1,
								label: '0~1所'
							},
							{
								min: 2,
								max: 4,
								label: '2~4所'
							},
							{
								min: 5,
								max: 15,
								label: '5~15所'
							},
							{
								min: 16,
								label: '15+所'
							},
						],
						hoverLink: true,
						textStyle: {
							fontSize: 8
						},
					},
					geo: {
						map: 'china',
						roam: false, //不开启缩放和平移
						zoom: 1.2, //视角缩放比例
						label: {
							normal: {
								show: false,
								fontSize: 8,
								color: 'rgba(0, 0, 0, 0.5)' //文字颜色
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(0, 0, 0, 0.2)' //省份边框颜色
							},
							emphasis: {
								areaColor: '#F3B329', //鼠标选择区域颜色
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
								borderWidth: 0,
								shadowColor: 'rgba(0, 0, 0, 0.2)' //选择后的边框阴影颜色
							}
						}
					},
					//配置属性
					series: [{
						type: 'map',
						geoIndex: 0,
						animation: false,
						data: mydata,
					}]
				};
				//初始化echarts实例
				chart.setOption(optionMap);
				this.$refs.mapChart.setChart(chart);
			}
		}
	};
	// #endif
</script>

<script module="echarts" lang="renderjs">
	// #ifdef APP || H5
	import * as echarts from 'echarts/echarts.min.js'; /*echarts.min.js为在线定制*/
	const chinaMap = require('../../static/china.json');
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js' //这里也可以换成echarts.min.js
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},

		methods: {
			initEcharts() {
				echarts.registerMap('china', chinaMap)
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
		}

	}
	// #endif
</script>



<style scoped lang="scss">
	//#ifdef MP-WEIXIN
	.wrap {
		width: 100%;
		height: 600rpx;
		border: 1rpx solid #ddd;
		background-color: #feffff;
	}

	//#endif
	
	//#ifdef APP || H5
	.echarts {
		border: 1rpx solid #ddd;
		width: 100%;
		height: 600rpx;
		background-color: #feffff;
	}
	//#endif
	.top_title {
		// margin-top: 15px;
		text-align: center;
		background-color: #FFF;
	}

	.title_1 {
		padding-top: 15rpx;
		font-size: 19px;
		color: #00006d;
	}

	.title_2 {
		font-size: 13px;
		padding-top: 5rpx;
		color: #F0AD4E;
		padding-bottom: 5rpx;
	}

	// 省份\n   学校 985 211 双一流\n 学校 ...\n  ...
	.provience {
		font-size: large;
	}

	.university {
		font-size: small;
	}

	.u985 {
		margin-left: 1rpx;
		font-size: smaller;
		color: #DD524D;
		font-weight: 700;
	}

	.u211 {
		font-size: smaller;
		color: #F0AD4E;
		font-weight: 700;
	}

	.u1 {
		font-size: smaller;
		color: #4CD964;
		font-weight: 700;
	}

	.occupy {
		color: #F1F1F1;
	}

	.goods-list-box {
		// border: solid red 2rpx;
		// background: #FFF;
		background: #f2f5f9;
		padding-top: 20rpx;
		// padding-bottom: 55%;
		// height: ;
		// 列数
		column-count: 2;
		// 间隔
		column-gap: 18rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 0px;
		height: 100%;

		.goods-list-item {
			// 避免在元素内部插入分页符。
			break-inside: avoid;
			background: #FFF;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			font-size: 28rpx;
		}
	}
</style>
